<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人主页</title>
  </head>
  <style>
    /* 设置页面整体布局为弹性盒子，背景图片铺满整个视口 */
    body {
      display: flex;
      flex-direction: row;
      height: 100vh;
      margin: 0px;
      background-image: url(https://thumbs-eu-west-1.myalbum.io/photo/1k0/ca22d9e7-11ca-4d26-a0e1-e732475217ca.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }
    /* 所有元素设置默认边框 */
    * {
      border: 0px solid #472b92;
    }
    /* 设置元素的弹性为1，使其根据剩余空间扩展 */
    .flex1 {
      flex: 1;
    }
    /* 设置元素内容居中对齐 */
    .juzhong {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* 设置外边距 */
    .waibianju {
      margin: 10px 0px 0px 30px;
    }
    /* 设置按钮样式 */
    .biankuang {
      border-style: solid;
      border-width: 5px;
      border-color: rgb(132, 131, 148);
      font-size: 15px;
      font-weight: bold;
      color: rgb(255, 255, 255);
      text-align: center;
      padding: 3px;
      margin: 100px 0px 0px 30px;
      border-radius: 15px;
      cursor: pointer;
      letter-spacing: 3px;
    }

    /* 移除链接的下划线 */
    a {
      text-decoration: none;
    }
    /* 设置按钮悬浮效果 */
    .button4:hover {
      box-shadow: 0 12px 16px 0 rgba(228, 214, 92, 0.24),
        0 17px 50px 0 rgba(241, 241, 237, 0.19);
    }
    /* 设置按钮点击效果 */
    .button:active {
      background-color: #26be59;
      box-shadow: 0 5px #979e58;
      transform: translateY(2px);
    }
    /* 设置图片样式 */
    .img1 {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      position: fixed;
      top: 100px;
      right: 100px;
      border: 1px solid rgb(17, 196, 136);
      background-color: #a7ada9;
    }
    .img2 {
      width: 200px;
      height: 200px;
    }
    /* 设置文字样式 */
    p {
      font-size: 20px;
      font-weight: bold;
      color: white;
      text-align: center;
      margin: 0px;
      letter-spacing: 15px;
    }
    .right:hover {
      box-shadow: 0 12px 16px 0 rgba(231, 231, 104, 0.24),
        0 17px 50px 0 rgba(28, 13, 116, 0.19);
      cursor: auto;
      border-radius: 25px;
    }
    .fixed {
      position: fixed;
      top: 10px;
      left: 30%;
    }
    .fixed1 {
      position: fixed;

      margin-left: 100px;
      margin-bottom: 120px;
    }
    /* 图片容器样式 */
    .image-container {
      position: relative;
      width: 500px; /* 根据实际情况调整宽度 */
      height: 500px; /* 根据实际情况调整高度 */
      overflow: hidden;
    }
    /* 图片样式 */
    .image-container img {
      position: absolute;
      top: 0;
      left: 0;
      width: 80%;
      height: 80%;
      opacity: 0;
      transition: opacity 1s ease-in-out; /* 渐变效果 */
      border-radius: 25px;
    }
    /* 当前显示的图片样式 */
    .image-container img.active {
      opacity: 1;
    }
  </style>
  <body>
    <!-- 页面左侧菜单栏 -->
    <div style="width: 30%">
      <!-- 每个菜单项的样式和链接 -->
      <div style="height: 15%" class="waibianju juzhong">
        <a href="https://www.baidu.com">
          <p
            style="height: 20px"
            class="button button4 biankuang juzhong"
            onselectstart="return false;"
            oncopy="return false;"
          >
            个人主页
          </p>
        </a>
      </div>
      <div style="height: 15%" class="waibianju juzhong">
        <a href="https://www.baidu.com">
          <p
            style="height: 20px"
            class="button button4 biankuang juzhong"
            onselectstart="return false;"
            oncopy="return false;"
          >
            个人信息
          </p>
        </a>
      </div>

      <div style="height: 15%" class="waibianju juzhong">
        <a href="https://zhoufuguo.github.io/-/">
          <p
            style="height: 20px"
            class="button button4 biankuang juzhong"
            onselectstart="return false;"
            oncopy="return false;"
          >
            兴趣爱好
          </p>
        </a>
      </div>
      <div style="height: 15%" class="waibianju juzhong">
        <a href="https://www.baidu.com">
          <p
            style="height: 20px"
            class="button button4 biankuang juzhong"
            onselectstart="return false;"
            oncopy="return false;"
          >
            个人作品
          </p>
        </a>
      </div>
    </div>
    <!-- 页面右侧内容区域 -->
    <div style="width: 70%">
      <!-- 用户头像图片 -->
      <div style="height: 30%">
        <img
          class="img1"
          src="https://thumbs-eu-west-1.myalbum.io/photo/1k0/b2f2ebfb-00c9-4516-8845-da37bd800cbd.jpg"
        />

        <p
          style="
            font-size: 20px;
            font-weight: bold;
            color: white;
            text-align: center;
            margin-top: 300px;
            margin-left: 400px;
            letter-spacing: 15px;
            opacity: 0.3;
          "
          class="fixed"
        >
          坦坦荡荡,一切随缘!
        </p>
      </div>
      <div style="height: 10%">
        <p
          style="
            font-size: 30px;
            width: 100px;
            margin-top: 210px;
            margin-left: 300px;
          "
          class="fixed right"
          onselectstart="return false;
          oncopy:return false;"
        >
          坦荡
        </p>
      </div>
      <div style="height: 60%" class="fixed1 image-container">
        <img
          class="img2"
          src="https://thumbs-eu-west-1.myalbum.io/photo/1k0/7ff19a2c-0239-45e9-ba24-074eb68560d0.jpg"
        />

        <img
          class="img2"
          src="https://thumbs-eu-west-1.myalbum.io/photo/1k0/cd501bf9-01b8-4089-99b7-69b9e0b333d4.jpg"
        />

        <img
          class="img2"
          src="https://thumbs-eu-west-1.myalbum.io/photo/1k0/eac0ef9e-f650-4b97-a8dc-c32f65cc4171.jpg"
        />

        <img
          class="img2"
          src="https://thumbs-eu-west-1.myalbum.io/photo/1k0/ba93a541-7afd-4b2f-ac05-d22f870e30aa.jpg"
        />

        <img
          class="img2"
          src="https://thumbs-eu-west-1.myalbum.io/photo/1k0/6aac3c6b-43f5-4bdb-b21a-e65fab56351b.jpg"
        />

        <img
          class="img2"
          src="https://thumbs-eu-west-1.myalbum.io/photo/1k0/c70e0609-f78d-4a07-a3bd-7ed90aa6bf8a.jpg"
        />

        <img
          class="img2"
          src="https://thumbs-eu-west-1.myalbum.io/photo/1k0/6b5d19fc-05f3-4b86-a72a-1285bcfa2068.jpg"
        />

        <img
          class="img2"
          src="https://thumbs-eu-west-1.myalbum.io/photo/1k0/bdb44d79-4ff1-432f-b599-88d8b3e1952d.jpg"
        />

        <img
          class="img2"
          src="https://thumbs-eu-west-1.myalbum.io/photo/1k0/37bf826a-4901-48fa-bab0-df960548b8b7.jpg"
        />

        <img
          class="img2"
          src="https://thumbs-eu-west-1.myalbum.io/photo/1k0/11071b53-4c7c-4eb5-828b-59bc0b2d77f5.jpg"
        />
      </div>
    </div>
    <script>
      const images = document.querySelectorAll(".image-container img");
      let currentIndex = 0;

      function showNextImage() {
        // 移除当前活动图片的 active 类
        images[currentIndex].classList.remove("active");
        // 计算下一张图片的索引
        currentIndex = (currentIndex + 1) % images.length;
        // 为下一张图片添加 active 类
        images[currentIndex].classList.add("active");
      }

      // 初始显示第一张图片
      images[currentIndex].classList.add("active");

      // 每隔 3 秒切换一次图片
      setInterval(showNextImage, 3000);
    </script>
  </body>
</html>
